<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Extjs Page</title>
<link type="text/css" rel="stylesheet" href="../static/css/ext-all.css" />
<script type="text/javascript" src="../static/js/ext-base.js"></script>
<script type="text/javascript" src="../static/js/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../static/images/default/s.gif'; // 避免线上访问extjs.com而做的特殊处理
Ext.onReady(function(){
	// 该方法必须执行，用于页面加载时进行的页面初始化
	var store = new Ext.data.Store({
		// 定义数据集合对象
		proxy: new Ext.data.ScriptTagProxy({  
			url: 'http://extjs.com/forum/topics-browse-remote.php'  
		}), // 定义取数据的对象，将来会用DWRProxy来替代

		reader: new Ext.data.JsonReader({
			root: 'topics',  
			totalProperty: 'totalCount',  
			id: 'threadid',  
			fields: [  
				'title', 'forumtitle', 'forumid', 'author',{name: 'replycount', type: 'int'},  
				{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 
				'lastposter', 'excerpt' 
				//描述了各个数据的属性
			]  
		}), //定义读取数据的解析对象
		remoteSort: true
	});
	
	store.setDefaultSort('lastpost', 'desc'); // 设置默认排序规则

	var cm = new Ext.grid.ColumnModel([
		{
			id:'topic',
			header:'topic',
			dataIndex:'title',
			width:420
			//renderer:renderTopic
		},{
			header: "Author",  
			dataIndex: 'author',  
			width: 100,  
			hidden: true
		},{
			header: "Replies",  
			dataIndex: 'replycount',  
			width: 70,  
			align: 'right'
		},{
			id: 'last',  
			header: "Last Post",  
			dataIndex: 'lastpost',  
			width: 150
			//renderer: renderLast
		}]);

	cm.defaultSortable = true; 

	var grid = new Ext.grid.GridPanel({
		el:'topic-grid',  
		width: Ext.getBody().getWidth()-20,  
		height:800,  
		title:'ExtJS.com - Browse Forums',  
		store: store,  
		cm: cm,  
		trackMouseOver:false,  
		sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),  
		loadMask: true,  
		viewConfig: {  
			forceFit:true,  
			enableRowBody:true,  
			showPreview:true,  
			getRowClass : function(record, rowIndex, p, store){  
				if(this.showPreview){  
					p.body = '<p>'+record.data.excerpt+'</p>';  
						return 'x-grid3-row-expanded';  
				}  
				return 'x-grid3-row-collapsed';  
				}  
		},  
		bbar: new Ext.PagingToolbar({  
		pageSize: 25,  
		store: store,  
		displayInfo: true,  
		displayMsg: 'Displaying topics {0} - {1} of {2}',  
		emptyMsg: "No topics to display",  
		items:[  
			'-', {  
					pressed: true,  
					enableToggle:true,  
					text: 'Show Preview',  
					cls: 'x-btn-text-icon details'
			}]  
		})  
	});  
		
	grid.render();  
	store.load({params:{start:0, limit:25}});  
});
</script>
</head>
<body>
<div id="test">aaa</div>
<div id="topic-grid"></div>
</body>
</html>